@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/gradient";
@import "compass/css3/inline-block";

/* clean gray
*******************************************************************************/
@mixin clean-gray {
  @include linear-gradient(color-stops(#eee, #ccc));
  @include inline-block;
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  @include border-radius(3px);
  color: #333;
  font: bold 100% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 8px 20px;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  text-decoration: none;

  &:hover {
    @include linear-gradient(color-stops(#ddd, #bbb));
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
  }

  &:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    @include single-box-shadow(inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee);
  }
}

button.clean-gray, a.clean-gray { @include clean-gray; }